<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Portfolio</title>
    <!-- Meta Data -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, shrink-to-fit=no"
    />
    <meta name="format-detection" content="telephone=no" />
    <meta name="format-detection" content="address=no" />
    <meta name="description" content="vCard" />
    <link rel="stylesheet" type="text/css" href="assets/styles/style.css" />
  </head>

  <body class="bg-triangles">
    <!-- Preloader -->
    <div class="preloader">
      <div class="preloader__wrap">
        <div class="circle-pulse">
          <div class="circle-pulse__1"></div>
          <div class="circle-pulse__2"></div>
        </div>
        <div class="preloader__progress"><span></span></div>
      </div>
    </div>
    <main class="main">
      <div class="container gutter-top">
        <div class="row sticky-parent">
          <!-- Sidebar -->
          <aside class="col-12 col-md-12 col-xl-3">
            <div class="sidebar box pb-0 sticky-column">
              <svg class="avatar avatar--180" viewBox="0 0 188 188">
                <g class="avatar__box">
                  <image
                    xlink:href="assets/img/avatar-1.jpg"
                    height="100%"
                    width="100%"
                  />
                </g>
              </svg>
              <div class="text-center">
                <h3 class="title title--h3 sidebar__user-name">
                  <span class="weight--500">Felecia</span>Brown
                </h3>
                <div class="badge badge--gray">Creative Director</div>
                <!-- Social -->
                <div class="social">
                  <a class="social__link" href="http://www.bootstrapmb.com/"
                    ><i class="font-icon icon-facebook"></i></a
                  ><a class="social__link" href="https://www.behance.com/"
                    ><i class="font-icon icon-twitter"></i></a
                  ><a class="social__link" href="https://www.linkedin.com/"
                    ><i class="font-icon icon-linkedin2"></i
                  ></a>
                </div>
              </div>
              <div class="sidebar__info box-inner box-inner--rounded">
                <ul class="contacts-block">
                  <li
                    class="contacts-block__item"
                    data-toggle="tooltip"
                    data-placement="top"
                    title="Birthday"
                  >
                    <i class="font-icon icon-calendar"></i>1994-06-20
                  </li>
                  <li
                    class="contacts-block__item"
                    data-toggle="tooltip"
                    data-placement="top"
                    title="Address"
                  >
                    <i class="font-icon icon-location"></i>??
                  </li>
                  <li
                    class="contacts-block__item"
                    data-toggle="tooltip"
                    data-placement="top"
                    title="E-mail"
                  >
                    <a href="mailto:singeve@qq.com"
                      ><i class="font-icon icon-envelope"></i>singeve@qq.com</a
                    >
                  </li>
                  <li
                    class="contacts-block__item"
                    data-toggle="tooltip"
                    data-placement="top"
                    title="Phone"
                  >
                    <i class="font-icon icon-phone"></i>13092604899
                  </li>
                  <li
                    class="contacts-block__item"
                    data-toggle="tooltip"
                    data-placement="top"
                    title="github"
                  >
                    <a href=""
                      ><i class="font-icon icon-github"></i
                      >github.com/singingXY</a
                    >
                  </li>
                  <li
                    class="contacts-block__item"
                    data-toggle="tooltip"
                    data-placement="top"
                    title="Blog"
                  >
                    <a href=""
                      ><i class="font-icon icon-user"></i
                      >https://singingxy.github.io/</a
                    >
                  </li>
                </ul>
              </div>
            </div>
          </aside>
          <!-- Content -->
          <div class="col-12 col-md-12 col-xl-9">
            <div class="box pb-0">
              <!-- Menu -->
              <div class="circle-menu">
                <div class="hamburger">
                  <div class="line"></div>
                  <div class="line"></div>
                  <div class="line"></div>
                </div>
              </div>
              <div class="inner-menu">
                <ul class="nav">
                  <li class="nav__item"><a href="index.html">About</a></li>
                  <li class="nav__item">
                    <a class="active" href="portfolio.html">Portfolio</a>
                  </li>
                  <li class="nav__item">
                    <a href="https://github.com/singingXY">Github</a>
                  </li>
                  <li class="nav__item">
                    <a href="https://singingxy.github.io/">Blog</a>
                  </li>
                </ul>
              </div>
              <!-- About -->
              <div class="pb-2">
                <h1 class="title title--h1 title__separate">Portfolio</h1>
              </div>
              <!-- Gallery -->
              <div class="pb-0">
                <!-- Filter -->
                <div class="select">
                  <span class="placeholder">Select category</span>
                  <ul class="filter">
                    <li class="filter__item">Category</li>
                    <li class="filter__item active" data-filter="*">
                      <a class="filter__link active" href="#filter">All</a>
                    </li>
                    <li class="filter__item" data-filter=".category-concept">
                      <a class="filter__link" href="#filter">Concept</a>
                    </li>
                    <li class="filter__item" data-filter=".category-design">
                      <a class="filter__link" href="#filter">Design</a>
                    </li>
                    <li class="filter__item" data-filter=".category-life">
                      <a class="filter__link" href="#filter">Life</a>
                    </li>
                  </ul>
                  <input type="hidden" name="changemetoo" />
                </div>
                <!-- Content -->
                <div class="gallery-grid js-masonry js-filter-container">
                  <div class="gutter-sizer"></div>
                  <!-- Item 1 -->
                  <figure class="gallery-grid__item category-concept">
                    <div class="gallery-grid__image-wrap">
                      <img
                        class="gallery-grid__image cover lazyload"
                        src="assets/img/image_01.jpg"
                        data-zoom
                        alt=""
                      />
                    </div>
                    <figcaption class="gallery-grid__caption">
                      <h4 class="title gallery-grid__title">Half Avocado</h4>
                      <span class="gallery-grid__category">Concept</span>
                    </figcaption>
                  </figure>
                  <!-- Item 2 -->
                  <figure class="gallery-grid__item category-concept">
                    <div class="gallery-grid__image-wrap">
                      <img
                        class="gallery-grid__image cover lazyload"
                        src="assets/img/image_02.jpg"
                        data-zoom
                        alt=""
                      />
                    </div>
                    <figcaption class="gallery-grid__caption">
                      <h4 class="title gallery-grid__title">Pink Flamingo</h4>
                      <span class="gallery-grid__category">Concept</span>
                    </figcaption>
                  </figure>
                  <!-- Item 3 -->
                  <figure class="gallery-grid__item category-design">
                    <div class="gallery-grid__image-wrap">
                      <img
                        class="gallery-grid__image cover lazyload"
                        src="assets/img/image_03.jpg"
                        data-zoom
                        alt=""
                      />
                    </div>
                    <figcaption class="gallery-grid__caption">
                      <h4 class="title gallery-grid__title">Abstract</h4>
                      <span class="gallery-grid__category">Design</span>
                    </figcaption>
                  </figure>
                  <!-- Item 4 -->
                  <figure class="gallery-grid__item category-design">
                    <div class="gallery-grid__image-wrap">
                      <img
                        class="gallery-grid__image cover lazyload"
                        src="assets/img/image_04.jpg"
                        data-zoom
                        alt=""
                      />
                    </div>
                    <figcaption class="gallery-grid__caption">
                      <h4 class="title gallery-grid__title">Abstract #2</h4>
                      <span class="gallery-grid__category">Design</span>
                    </figcaption>
                  </figure>
                  <!-- Item 5 -->
                  <figure class="gallery-grid__item category-design">
                    <div class="gallery-grid__image-wrap">
                      <img
                        class="gallery-grid__image cover lazyload"
                        src="assets/img/image_05.jpg"
                        data-zoom
                        alt=""
                      />
                    </div>
                    <figcaption class="gallery-grid__caption">
                      <h4 class="title gallery-grid__title">Abstract #3</h4>
                      <span class="gallery-grid__category">Design</span>
                    </figcaption>
                  </figure>
                  <!-- Item 6 -->
                  <figure class="gallery-grid__item category-life">
                    <div class="gallery-grid__image-wrap">
                      <img
                        class="gallery-grid__image cover lazyload"
                        src="assets/img/image_06.jpg"
                        data-zoom
                        alt=""
                      />
                    </div>
                    <figcaption class="gallery-grid__caption">
                      <h4 class="title gallery-grid__title">Golden Gate</h4>
                      <span class="gallery-grid__category">Life</span>
                    </figcaption>
                  </figure>
                  <!-- Item 7 -->
                  <figure class="gallery-grid__item category-concept">
                    <div class="gallery-grid__image-wrap">
                      <img
                        class="gallery-grid__image cover lazyload"
                        src="assets/img/image_07.jpg"
                        data-zoom
                        alt=""
                      />
                    </div>
                    <figcaption class="gallery-grid__caption">
                      <h4 class="title gallery-grid__title">Peach</h4>
                      <span class="gallery-grid__category">Concept</span>
                    </figcaption>
                  </figure>
                  <!-- Item 8 -->
                  <figure class="gallery-grid__item category-design">
                    <div class="gallery-grid__image-wrap">
                      <img
                        class="gallery-grid__image cover lazyload"
                        src="assets/img/image_08.jpg"
                        data-zoom
                        alt=""
                      />
                    </div>
                    <figcaption class="gallery-grid__caption">
                      <h4 class="title gallery-grid__title">Abstract #4</h4>
                      <span class="gallery-grid__category">Design</span>
                    </figcaption>
                  </figure>
                  <!-- Item 9 -->
                  <figure class="gallery-grid__item category-life">
                    <div class="gallery-grid__image-wrap">
                      <img
                        class="gallery-grid__image cover lazyload"
                        src="assets/img/image_09.jpg"
                        data-zoom
                        alt=""
                      />
                    </div>
                    <figcaption class="gallery-grid__caption">
                      <h4 class="title gallery-grid__title">Hedgehog</h4>
                      <span class="gallery-grid__category">Life</span>
                    </figcaption>
                  </figure>
                </div>
              </div>
            </div>
            <!-- Footer -->
            <footer class="footer">© 2019 vCard</footer>
          </div>
        </div>
      </div>
    </main>
    <div class="back-to-top"></div>
    <!-- SVG masks -->
    <svg class="svg-defs">
      <clipPath id="avatar-box">
        <path
          d="M1.85379 38.4859C2.9221 18.6653 18.6653 2.92275 38.4858 1.85453 56.0986.905299 77.2792 0 94 0c16.721 0 37.901.905299 55.514 1.85453 19.821 1.06822 35.564 16.81077 36.632 36.63137C187.095 56.0922 188 77.267 188 94c0 16.733-.905 37.908-1.854 55.514-1.068 19.821-16.811 35.563-36.632 36.631C131.901 187.095 110.721 188 94 188c-16.7208 0-37.9014-.905-55.5142-1.855-19.8205-1.068-35.5637-16.81-36.63201-36.631C.904831 131.908 0 110.733 0 94c0-16.733.904831-37.9078 1.85379-55.5141z"
        />
      </clipPath>
      <clipPath id="avatar-hexagon">
        <path
          d="M0 27.2891c0-4.6662 2.4889-8.976 6.52491-11.2986L31.308 1.72845c3.98-2.290382 8.8697-2.305446 12.8637-.03963l25.234 14.31558C73.4807 18.3162 76 22.6478 76 27.3426V56.684c0 4.6805-2.5041 9.0013-6.5597 11.3186L44.4317 82.2915c-3.9869 2.278-8.8765 2.278-12.8634 0L6.55974 68.0026C2.50414 65.6853 0 61.3645 0 56.684V27.2891z"
        />
      </clipPath>
    </svg>
    <!-- JavaScripts -->
    <script src="assets/js/jquery-3.4.1.min.js"></script>
    <script src="assets/js/plugins.js"></script>
    <script src="assets/js/common.js"></script>
  </body>
</html>
